<template>
  <el-form
    :model="postForm"
    :rules="postFormRules"
    ref="postForm"
    style="height: 100%"
  >
    <el-container style="height: 100%;">
      <el-main class="main">
        <!-- 标题 -->
        <el-form-item prop="title">
          <el-input
            v-model="postForm.title"
            @input="formChanged = true"
            :disabled="editLock"
            :placeholder="$t('articleTitlePlaceholder')"
            style="width: 100%;"
          ></el-input>
        </el-form-item>
        <!-- 内容 -->
        <el-form-item prop="content">
          <markdown-editor
            v-model="postForm.content"
            @change="formChanged = true"
            @save="onSave"
          />
        </el-form-item>
      </el-main>
      <el-aside class="aside">
        <el-scrollbar class="scrollbar" ref="scrollbar">
          <div class="card">
            <div class="card-header">
              <span>发布</span>
              <el-button
                class="collapse"
                type="text"
                :icon="show1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                @click="show1 = !show1"
              ></el-button>
            </div>
            <el-collapse-transition>
              <div class="card-body" v-show="show1">
                <!-- 路径 -->
                <el-form-item prop="path">
                  <el-input
                    v-model="postForm.path"
                    @input="formChanged = true"
                    :disabled="editLock"
                    :placeholder="$t('articlePathPlaceholder')"
                    style="width: 100%;"
                  ></el-input>
                </el-form-item>

                <div class="publish-settings">
                  <el-col :span="8">
                    <!-- 开启toc -->
                    <el-switch
                      v-model="postForm.toc"
                      @input="formChanged = true"
                      :active-text="$t('openToc')"
                    ></el-switch>
                  </el-col>
                  <el-col :span="8">
                    <!-- 是否保存为草稿，如果切换成草稿之后，那么就不让切回去了, 否则来回切换会有问题 -->
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="发布后的内容无法再切换为草稿"
                      placement="top"
                    >
                      <el-switch
                        v-model="postForm.layout"
                        active-value="draft"
                        inactive-value="post"
                        :disabled="editLock"
                        active-text="草稿"
                      ></el-switch>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      type="primary"
                      icon="el-icon-success"
                      size="mini"
                      :loading="saving"
                      style="float: right;"
                      @click="submitForm()"
                      >{{ $t("save") }}
                    </el-button>
                  </el-col>
                </div>
              </div>
            </el-collapse-transition>
          </div>

          <!-- 标签 -->
          <div class="card">
            <div class="card-header">
              <span>标签</span>
              <el-button
                class="collapse"
                type="text"
                :icon="show2 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                @click="show2 = !show2"
              >
              </el-button>
            </div>
            <el-collapse-transition>
              <div class="card-body" v-show="show2">
                <el-form-item prop="tags">
                  <el-select
                    v-model="postForm.tags"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    style="width:100%;"
                    :placeholder="$t('selectTags')"
                    @input="formChanged = true"
                  >
                    <el-option
                      v-for="tag in tags"
                      :key="tag"
                      :label="tag"
                      :value="tag"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-collapse-transition>
          </div>

          <!-- 分类 -->
          <div class="card">
            <div class="card-header">
              <span>分类</span>
              <el-button
                class="collapse"
                type="text"
                :icon="show3 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                @click="show3 = !show3"
              >
              </el-button>
            </div>
            <el-collapse-transition>
              <div class="card-body" v-show="show3">
                <el-form-item prop="categories">
                  <el-select
                    v-model="postForm.categories"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    style="width:100%;"
                    :placeholder="$t('selectCategories')"
                    @input="formChanged = true"
                  >
                    <el-option
                      v-for="category in categories"
                      :key="category"
                      :label="category"
                      :value="category"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-collapse-transition>
          </div>

          <!-- Front-matter -->
          <div class="card">
            <div class="card-header">
              <span
                >Front-matter
                <i
                  class="el-icon-question"
                  style="cursor: pointer;"
                  @click="openFrontMatterHelp"
                ></i
              ></span>
              <el-button
                class="collapse"
                type="text"
                :icon="show4 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                @click="show4 = !show4"
              >
              </el-button>
            </div>
            <el-collapse-transition>
              <div class="card-body" v-show="show4">
                <el-form-item
                  v-for="item in frontMatters"
                  :key="item.title"
                  :label="item.title"
                >
                  <el-input :value="item.value">
                    <el-button
                      slot="prepend"
                      icon="el-icon-edit"
                      @click="openEditFrontMatter(item)"
                    ></el-button>
                    <el-button
                      slot="append"
                      icon="el-icon-delete"
                      @click="deleteFrontMatter(item)"
                    ></el-button>
                  </el-input>
                </el-form-item>
                <el-button
                  type="success"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="openAddFrontMatter"
                  >Add
                </el-button>
                <front-matter ref="frontMatterEditor" @ok="addFrontMatter" />
              </div>
            </el-collapse-transition>
          </div>
        </el-scrollbar>
      </el-aside>
    </el-container>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import MarkdownEditor from "@/components/Editor";
import FrontMatter from "@/components/FrontMatter";
import ClientAnalytics from "@/plugins/analytics";

export default {
  components: { MarkdownEditor, FrontMatter },
  data() {
    return {
      show1: true,
      show2: true,
      show3: true,
      show4: true,
      saving: false,
      editLock: false,
      postForm: {
        title: "",
        path: "",
        originContent: "",
        content: "",
        tags: [],
        categories: [],
        toc: false,
        layout: "post" // 默认发表文章，还可取值draft表示发表草稿
      },
      frontMatters: [],
      postFormRules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }]
      },
      formChanged: false
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.formChanged) {
      if (window.confirm("有未保存的更改，确认离开吗？")) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  methods: {
    async submitForm() {
      this.save(true);
    },

    async onSave() {
      this.save(false);
    },

    /**
     * 保存更改
     * @param toMain 是否跳转到首页
     * @returns {Promise<void>}
     */
    async save(toMain) {
      toMain = toMain && this.postForm.layout === "post"; // 如果是保存草稿，那么保存之后不要跳到首页去
      let valid = await this.$store.dispatch(
        "Hexo/validatePostForm",
        this.$refs.postForm
      );
      if (valid) {
        this.saving = true; // 保存中
        this.editLock = true; // 锁定编辑
        try {
          if (this.frontMatters && this.frontMatters.length > 0) {
            for (let i = 0; i < this.frontMatters.length; i++) {
              let item = this.frontMatters[i];
              this.postForm[item.title] = item.value;
            }
          }
          await this.$store.dispatch("Hexo/createPost", this.postForm);
          this.formChanged = false;
          this.postForm.originContent = this.postForm.content;
          this.$notify({ title: "成功", message: "保存成功", type: "success" });
          if (toMain) {
            this.$router.push({ name: "main" });
          }
          ClientAnalytics.event("article", "createSubmit");
        } catch (err) {
          console.error(err);
          this.$notify.error({ title: "错误", message: "保存失败" });
        } finally {
          this.saving = false;
        }
      } else {
        this.$notify.error({ title: "错误", message: "表单数据验证失败" });
      }
    },

    openFrontMatterHelp() {
      require("electron").shell.openExternal(
        "https://hexo.io/docs/front-matter.html"
      );
    },

    openAddFrontMatter() {
      this.$refs.frontMatterEditor.open();
    },

    openEditFrontMatter(item) {
      this.$refs.frontMatterEditor.open(item.title, item.value);
    },

    addFrontMatter(item) {
      let exists = false;
      for (let i = 0; i < this.frontMatters.length; i++) {
        if (this.frontMatters[i].title === item.title) {
          exists = true;
          this.frontMatters[i].value = item.value;
          break;
        }
      }
      if (!exists) {
        this.frontMatters.push(item);
      }
    },

    deleteFrontMatter(item) {
      let index = -1;
      for (let i = 0; i < this.frontMatters.length; i++) {
        if (this.frontMatters[i].title === item.title) {
          index = i;
          break;
        }
      }
      if (index > -1) {
        this.frontMatters.splice(index, 1);
      }
    }
  },
  computed: {
    ...mapGetters({
      tags: "Hexo/tags",
      categories: "Hexo/categories"
    })
  }
};
</script>

<style scoped lang="scss">
.main {
  height: 100%;
  padding: 20px 10px 0px;
}

.aside {
  height: 100%;
  width: 300px !important;
  padding-top: 20px;
  padding-right: 10px;
}

.scrollbar {
  height: 100%;
  width: 300px !important;

  .el-scrollbar__wrap {
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
}

.card {
  margin-bottom: 10px;
  margin-right: 10px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;

  .card-header {
    padding: 10px 10px;
    border-bottom: 1px solid #ebeef5;
  }

  .card-body {
    padding: 10px;

    .publish-settings {
      display: table;
      width: 100%;

      .el-col {
        line-height: 28px;
      }
    }
  }

  .collapse {
    float: right;
    padding: 3px 0;
  }
}
</style>
